<template>
  <div>
    <h1>about</h1>
    <button @click="add()">按钮</button>
    <!-- <h2>{{ $store.state.xxx }}</h2>
    <h2>{{ $store.state.num }}</h2> -->
    <h3>{{ xxx }}</h3>
    <h3>{{ num }}</h3>
    <div>{{ $store.getters.z }}</div>
    <h3>{{ a }}</h3>
  </div>
</template>
<script>
  // 导入组件
import {mapState,mapGetters} from 'vuex'
  export default {
    // 注册组件
    components: {
     },
    // 实例属性
    name: 'APP',
    // 数据
    data () {
      return {
        Num:0,
        string:'xxx',
        arr:[1,2],
        obj:{
          a:1,
          b:2
        }
       }
     },
     // 实例方法
     methods: {
      add(){
        // console.log(typeof  );
        
        console.log(Object.prototype.toString.call(this.num).slice(7));
        
        // this.$store.dispatch('add',[1,'w'])
      }
     },
     // 计算属性
     computed: {
      // ...mapState({a:'xxx',b:'num'})
      ...mapState(['xxx','num']),
      ...mapGetters({
        a:'z'
      })
      
     },
     // 创建后（只能访问数据，不能操作dom）
     created () {
     },
     // 挂载后（既能访问数据，也能操作dom）
     mounted () {
     },
     // 过滤器
     filters: {
     }
  }
</script>
<style lang="less" scoped>

</style>
